<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台管理</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            font-family: 'Arial', sans-serif; /* 可以根据需要更换为合适的中文字体 */
        }

        .manager-container {
            display: flex;
            flex-direction: column;
            height: 100%;
            background-color: #f8f8ff;
        }

        .manager-header {
            display: flex;
            background-color: #2c334c;
            padding: 10px;
            height: 90px;
        }

        .manager-header-left {
            width: 200px;
            display: flex;
            align-items: center;
        }

        .manager-header-left img {
            width: 30px;
            height: 30px;
            border-radius: 5px;
        }

        .manager-header-left .title {
            flex: 1;
            margin-left: 5px;
            font-size: 18px;
            font-weight: bold;
            color: #ddd;
        }

        .manager-header-center {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .manager-header-right {
            width: 200px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }

        .manager-header-right .avatar {
            display: flex;
            align-items: center;
            padding-right: 10px;
            color: #ccc;
            cursor: default;
        }

        .manager-header-right .avatar img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 5px;
        }

        .manager-main {
            display: flex;
            height: 100%; /* 确保主体区域高度填满 */
        }

        /* 侧边栏 */
        .manager-main-left {
            width: 200px;
            height: 100%; /* 侧边栏铺满整个屏幕高度 */
            background-color: #222b40;
            box-shadow: 0 0 6px rgba(0, 21, 41, .35);
            display: flex;
            flex-direction: column;
        }

        .el-menu {
            width: 100%;
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .el-menu-item, .el-submenu__title {
            width: 100%;
            text-align: center;
            color: #ccc;
            height: 50px;
            line-height: 50px;
            background-color: #222b40 !important;
            cursor: pointer;
        }

        .el-menu-item:hover, .el-submenu__title:hover {
            background-color: #333;
        }

        .el-menu-item.is-active {
            color: #3399ff !important;
        }

        .manager-main-right {
            flex: 1;
            padding: 20px;
            overflow-y: auto; /* 让内容区域可滚动 */
        }

        .manager-main-right .search,
        .manager-main-right .operation,
        .manager-main-right .table,
        .card {
            margin-bottom: 15px;
            padding: 10px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }

        /* 表格的样式 */
        th.el-table__cell {
            background-color: #f8f8f8 !important;
            color: #666;
        }

        .pagination {
            margin-top: 10px;
        }

        /* ElementUI 样式 */
        .el-breadcrumb__inner {
            color: #ccc !important;
        }

    </style>
</head>
<body>

<div class="manager-container">
    <!-- 头部 -->
    <div class="manager-header">
        <div class="manager-header-left">
            <img src="image/logo.png" alt="Logo" />
            <div class="title">图书管理系统</div>
        </div>
        <div class="manager-header-center">
            <!-- Breadcrumb -->
            <div class="breadcrumb">首页/ 当前页面</div>
        </div>
        <div class="manager-header-right">
            <!-- Dropdown Menu -->
            <div class="dropdown-menu">
                <a href="reader-edit.jsp">修改密码</a>
                <a href="Adminlogin.jsp">退出登录</a>
            </div>
        </div>
    </div>

    <!-- 主体 -->
    <div class="manager-main">
        <!-- 侧边栏 -->
        <div class="manager-main-left">
            <div class="el-menu">
                <div class="el-menu-item" id="home">
                    <i class="el-icon-s-home"></i>
                    <span>系统首页</span>
                </div>
                <div class="el-submenu" id="info-management">
                    <div class="el-submenu__title">
                        <i class="el-icon-menu"></i><span>信息管理</span>
                    </div>
                    <div class="el-menu">
                        <div class="el-menu-item" id="personal-info">个人信息</div>
                        <div class="el-menu-item" id="reader-management">读者管理</div>
                        <div class="el-menu-item" id="book-management">书籍管理</div>
                        <div class="el-menu-item" id="borrow-management">借阅管理</div>
                        <div class="el-menu-item" id="borrow-status">借阅状态</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 数据表格 -->
        <div class="manager-main-right" id="content">
            <!-- Content will be loaded here -->
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        // 获取右侧内容区
        const contentArea = document.querySelector('.manager-main-right');

        // 定义菜单项和对应的内容路径
        const menuItems = {
            'personal-info': 'PersonalList', // 个人信息
            'reader-management': 'ReaderList', // 读者管理
            'book-management': 'BooksList', // 书籍管理
            'borrow-management': 'BorrowList', // 借阅管理
            'borrow-status': 'borrow-status.jsp' // 借阅状态
        };

        // 为每个菜单项添加点击事件监听
        Object.keys(menuItems).forEach(id => {
            document.getElementById(id).addEventListener('click', function () {
                loadContent(menuItems[id]);
            });
        });

        // 加载内容的函数
        function loadContent(url) {
            // 发送 AJAX 请求获取内容
            const xhr = new XMLHttpRequest();
            xhr.open('GET', url, true); // 假设路径是 personal-info.jsp、reader-management.jsp 等
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    // 将返回的内容插入到右侧区域
                    contentArea.innerHTML = xhr.responseText;
                }
            };
            xhr.send();
        }

    });
</script>

</body>
</html>
